<template>
  <q-card class="login-view">
    <q-card-section style="height: 100%; overflow: hidden; padding: 0px">
      <div class="row" style="height: 100%">
        <left-view />
        <div class="col column justify-center right q-pl-lg">
          <q-btn
            class="close"
            fab-mini
            flat
            icon="close"
            size="sm"
            padding="none"
            v-close-popup
          />
          <div class="full-width title">{{ $t('login.title') }}</div>
          <div class="q-mb-lg text-sub">
            {{ $t('login.subtitle') }}
            <a class="forgot-link" @click="$emit('to-signup')">{{
              $t('common.createAccount')
            }}</a>
          </div>
          <div style="width: 50%">
            <q-input
              color="accent"
              type="email"
              filled
              :label="$t('common.email')"
              v-model="email"
              :rules="[ruleHelpers.required]"
            ></q-input>
            <q-input
              color="accent"
              filled
              :label="$t('common.password')"
              type="password"
              v-model="password"
              :rules="[ruleHelpers.required]"
            ></q-input>
            <a class="forgot-link">{{ $t('login.forgotPassword') }}</a>
            <q-btn
              rounded
              class="full-width q-mt-lg"
              color="accent"
              @click="login"
              singular-event:btn:login
              >{{ $t('common.continue') }}</q-btn
            >
            <div class="column q-pa-md">
              <div style="width: 100%; text-align: center" class="text-sub">
                {{ $t('login.loginWithHint') }}
              </div>
              <div class="row justify-around q-my-md">
                <q-btn
                  round
                  v-for="item in loginWithItems"
                  :key="item.name"
                  v-singular-event:btn:login-with="item.name"
                  @click="loginWith(item)"
                >
                  <q-avatar>
                    <q-img :src="item.src" width="100%" height="100%"></q-img>
                  </q-avatar>
                </q-btn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>
<script lang="ts">
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { defineComponent, ref } from 'vue';
import { useQuasar, Loading } from 'quasar';
import { ruleHelpers } from 'src/utils/validationRules';
import LeftView from './LeftView.vue';
import { facebook, twitter, google, mslive, IUserInfo } from 'src/utils/auth';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'stores/global-store';
import facebookIcon from 'assets/images/lg-facebook-48px@2x.png';
import twitterIcon from 'assets/images/lg-twitter-48px@2x.png';
import googleIcon from 'assets/images/lg-google-48px@2x.png';
import msIcon from 'assets/images/lg-mslive-48px.png';

export default defineComponent({
  name: 'login-view',
  emits: ['to-signup', 'finish'],
  components: { LeftView },
  setup(_, { emit }) {
    const userStore = useUserStore();
    const globalStore = useGlobalStore();
    const $q = useQuasar();
    let email = ref('');
    let password = ref('');
    const login = () => {
      globalStore.isLoading = true;
      userStore
        .signin({
          email: email.value,
          password: password.value,
        })
        .then(() => {
          globalStore.isLoading = false;
          emit('finish');
        })
        .catch((error) => {
          globalStore.isLoading = false;
          $q.dialog({
            title: 'Error',
            message: error.message,
          });
        });
    };
    const loginWithItems = ref([
      {
        name: 'facebook',
        src: facebookIcon,
      },
      { name: 'twitter', src: twitterIcon },
      { name: 'google', src: googleIcon },
      { name: 'mslive', src: msIcon },
    ]);
    const loginWith = async (item: any) => {
      let user: IUserInfo | undefined = undefined;
      switch (item.name) {
        case 'facebook':
          {
            try {
              user = await facebook();
            } catch (error: any) {
              $q.dialog({
                title: 'Login Failed',
                message: error.message,
              });
              return;
            }
            await userStore
              .signinWithEmail(user.email as string)
              .catch(async (error) => {
                return userStore
                  .signupWithFacebook(user as any)
                  .catch((error) => {
                    $q.dialog({
                      title: 'Login Failed',
                      message: error.message,
                    });
                  });
              });
          }
          break;

        case 'twitter':
          {
            user = await twitter();
            await userStore
              .signinWithEmail(user.email as string)
              .catch((error) => {
                return userStore
                  .signupWithTwitter(user as any)
                  .catch((error) => {
                    $q.dialog({
                      title: 'Login Failed',
                      message: error.message,
                    });
                  });
              });
          }
          break;
        case 'google':
          {
            try {
              user = await google();
            } catch (error: any) {
              $q.dialog({
                title: 'Login Failed',
                message: error.message,
              });
              return;
            }
            await userStore
              .signinWithEmail(user.email as string)
              .catch((error) => {
                return userStore
                  .signupWithGoogle(user as any)
                  .catch((error) => {
                    $q.dialog({
                      title: 'Login Failed',
                      message: error.message,
                    });
                  });
              });
          }
          break;
        case 'mslive':
          {
            try {
              user = await mslive();
            } catch (error: any) {
              $q.dialog({
                title: 'Login Failed',
                message: error.message,
              });
              return;
            }
            await userStore
              .signinWithEmail(user.email as string)
              .catch((error) => {
                return userStore
                  .signupWithMslive(user as any)
                  .catch((error) => {
                    $q.dialog({
                      title: 'Login Failed',
                      message: error.message,
                    });
                  });
              });
          }
          break;
      }
    };
    return {
      email,
      password,
      loginWithItems,
      ruleHelpers,
      login,
      loginWith,
    };
  },
});
</script>
<style lang="sass" scoped>

.login-view
  width: 100vw
  height: 100vh
  box-sizing: border-box
  .left
    background-color: #141414
    .hello-text
      color: $sub
      font-size: 16px
      cursor: default
      line-height: 2em
  .right
    position: relative
    background-color: #1C1C1C
    .close
      position: absolute
      top: 24px
      right: 24px
.top-bar
  color: $sub
.title
  font-size: 23px
.forgot-link
  color: $accent
</style>
